<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            margin: auto;
            width: 800px;
            align-content: center;
        }
        .line {
            align-content: center;
            #border: 1px solid #0a0a0a;

        }
        span {
            margin-right: 10px;
            width: 100px;
            text-align: right;
            display: inline-block;
            border: 0;
        }
        input {
            width: 200px;
            text-align: left;
            margin-left: 10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

</head>
<div class="content">
<form action="{{ route('register') }}"   method="post">
   <!--
    <div class="line"><span>name</span><input type="text" name="name" value="demo" /></div>
    <div class="line"><span>nickname</span><input type="text"  value="nickname" name="nickname" /></div>
    -->
    <div class="line"><span>手机号</span><input type="text"  value="13777777777" name="phone" /></div>
    <div class="line"><span>密码</span>
        <input type="password" value="123" name="password" />

    </div>
    <div class="line"><span>确认密码</span>
        <input type="password" value="123" name="password_confirmation" />
    </div>
    <div class="line"><span>验证码</span>
        <input type="text" value="123" name="smscode" />

    </div>
    <!--
    <div class="line"><span>sex</span>
        <input type="radio" name="'sex" value="1" style="margin-left: 0; width: 10px"  checked="true"/>男
        <input type="radio" name="'sex" value="2" style="margin-left: 0; width: 10px" />女
    </div>
    <div class="line"><span>birthday</span><input type="text" value="2020-01-02" name="birthday" /></div>
    -->

    <div>
        <span class="send" style="cursor: pointer;background-color: #4CAF50;color: white;padding: 15px 32px;display: inline-block;font-size: 15px;">发送验证码</span>
        <span class="submit" style="cursor: pointer;background-color: #4CAF50;color: white;padding: 15px 32px;display: inline-block;font-size: 15px;">确认提交</span>
    </div>
</form>
</div>
<script>
    $(function () {

        $(".send").click(function () {
            var mobile=$("input[name=phone]").val()
            if (mobile.length !== 11){
               // return
            }
            $.ajax({
                url: '{{ route('sms.code') }}',
                method: 'get',
                data: 'mobile='+mobile,
                success: function (data) {
                    console.log(data)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    data = $.parseJSON(jqXHR.responseText)
                    alert(data.message)
                }
            })
        });

        $(".submit").click(function () {
            var data = $("form").serialize()
            $.ajax({
                url: '{{ route('register') }}',
                method: 'post',
                data: data,
                success:function (data) {
                    //console.log(data)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    data = $.parseJSON(jqXHR.responseText)
                    $.each(data, function (key, items) {
                        if(key === 'message'){
                            //alert(items)
                        }else{
                           $.each(items, function (name, err) {
                              // alert(name)
                               $("input[name="+name+"]").parent().append('<span style="display: inline">'+err+'</span>')
                           })
                        }
                    })
                }
            })
            return false;
        })
    })

</script>

</html>
